<!-- 计算属性 -->
<template>
  <div class="bgDiv">
    <!-- 计算属性案例 -->
    <van-button round type="default" color="#257A8D" class="reloadBtn" @click="clickReloadPage">刷新</van-button>
    <input type="text" v-model="firstName">
    <br>
    <input type="text" v-model="lastName">
    <br>
    <!-- 全名：<span>{{firstName}} - {{lastName}}</span> -->
    <span>{{ fullName }}</span> <br><br><br>

    <!-- 监视属性案例 -->
    <h2>今天天气：{{ info }}</h2>
    <van-button round type="default" color="#257A8D" class="reloadBtn" @click="clickExchangeWeather">切换天气</van-button>
    <hr>


    <!-- 深度监视 监视number下的a -->
    <h3>a的值是{{numbers.a}}</h3>
    <van-button round type="default" color="#257A8D" class="reloadBtn" @click="clickAddNumber">点我a+1</van-button>
    <h3>b的值是{{numbers.a}}</h3>
    <van-button round type="default" color="#257A8D" class="reloadBtn" @click="clickAddNumberB">点我b+1</van-button>
  </div>
</template>
  
<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      number: 66,
      firstName: "张",
      lastName: "三",
      isHot: true,
      numbers:{
        a:1,
        b:1
      }
    }
  },
  mounted() {
  },
  created() { },
  // 监视对象
  watch: {
    // Handelr什么时候调用？当isHot属性发生变化的时候  完整写嘎
    /*isHot: {
      // 初始化时让（handler）方法被调动
      immediate: true,
      handler(newValue, oldValue) {
        console.log(newValue)
        console.log(oldValue)
      }
    },
    // 监视多级结构中某个属性的变化
    'numbers.a':{
      handler(newValue, oldValue) {
        console.log(newValue)
      }
    },
    // 监视多级结构中所有属性的变化
    numbers:{
      // 开启深度监视
      deep:true,
      handler(){

      }
    }*/
    isHot(newValue,oldValue){
      console.log(newValue)
      console.log(oldValue)
    }
  },
  // 计算属性
  computed: {
    // 全写
    /*fullName:{
      // get有什么作用 当有人读取fullName时 get就会被调用，且返回值作为fullName的值
      // get什么时候调用 1，初次读取fullName时候会被调用 2，所依赖数据变化时候会被调用
      get(){
        return this.firstName + "-" + this.lastName
      },
      set(value){
        let arr = value.split("-")
        this.firstName = arr[0]
        this.lastName = arr[1]
      }
    }*/
    // 简写
    fullName() {
      return this.firstName + "-" + this.lastName
    },
    info() {
      return this.isHot == true ? "炎热" : "凉爽"
    }
  },
  methods: {
    clickReloadPage() {
      this.$router.push("InHospitalInfo");
    },
    // 修改天气
    clickExchangeWeather() {
      this.isHot = !this.isHot
    },
    clickAddNumber(){
      this.numbers.a ++ 
    },
    clickAddNumberB(){
      this.numbers.b ++ 
    }
  }
}
</script>
  
<style scoped>
.bomView {
  height: 5rem;
  width: 5rem;
  background-color: aqua;
}
</style>
  